<template>
  <!--search bar layout-->
  <div class="search-bar">
    <van-search v-model="keyWords" placeholder="请输入搜索关键词" />
  </div>
  <!--swipwer area-->
  <div class="swiper-area">
    <van-swipe :autoplay="3000">
      <van-swipe-item v-for="(banner, index) in bannerPicArray" :key="index">
        <van-image :src="banner.IMAGE" width="100%" />
      </van-swipe-item>
    </van-swipe>
  </div>
  <!--type bar-->
  <van-grid :column-num="5">
    <van-grid-item
      v-for="item in mallList"
      :key="item.ID"
      :icon="item.IMAGE"
      :text="item.MALL_CATEGORY_NAME"
    />
  </van-grid>
  <!--adbanner area-->
  <div class="ad-banner">
    <van-image :src="adBanner" />
  </div>
  <!--Recommend goods area-->
  <div class="recommend-area">
    <div class="recommend-title">商品推荐</div>
    <div class="recommend-body">
      <div v-for="(item, index) in recommendGoods" :key="index">
        <div class="recommend-item" @click="goGoodsPage(item.ID)">
          <van-image :src="item.IMAGE1" width="100" height="100" />
          <div class="recommend-name">{{ item.NAME }}</div>
          <div class="recommend-price">
            <span>￥{{ item.PRESENT_PRICE }}</span>
            <van-button size="mini" type="danger" round>立即购买</van-button>
          </div>
        </div>
      </div>
    </div>
  </div>
  <!--Hot Area-->
  <div class="hot-area">
    <div class="hot-title">热卖商品</div>
    <div class="hot-goods">
      <van-list>
        <van-row gutter="10" justify="space-around">
          <van-col span="12" v-for="(item, index) in hotGoods" :key="index">
            <hot-goods
              :image="item.IMAGE1"
              :name="item.NAME"
              :price="item.PRESENT_PRICE"
              :goodsId="item.ID"
            ></hot-goods>
          </van-col>
        </van-row>
      </van-list>
    </div>
  </div>

  <!-- loading -->
  <div class="loading" v-if="loading">
    <van-loading size="24px" color="#0094ff" vertical>加载中...</van-loading>
  </div>
</template>

<script>
import { defineComponent, onBeforeMount, ref } from 'vue'
import HotGoods from '../components/HotGoods'
import { getBannerList, getMallList } from '../api/index'
import { getRecommendGoodsList, getHotGoodsList } from '../api/goods'
import { useRouter } from 'vue-router'
export default defineComponent({
  setup() {
    const router = useRouter()
    const keyWords = ref('')
    const category = ref([])
    const recommendGoods = ref([])
    const hotGoods = ref([])
    const adBanner = ref(
      'http://images.baixingliangfan.cn/advertesPicture/20180404/20180404085441_850.gif'
    )
    const bannerPicArray = ref([])
    const goGoodsPage = (goodsId) => {
      router.push({ name: 'goods', query: { goodsId } })
    }
    const mallList = ref([])
    const loading = ref(false)
    const getBaner = () => {
      getBannerList().then((res) => {
        if (res.code === 200 && res.data) {
          bannerPicArray.value = res.data
        }
      })
    }
    const getMall = () => {
      getMallList().then((res) => {
        if (res.code === 200 && res.data) {
          mallList.value = res.data.sort((a, b) => {
            return Number(a.ID) - Number(b.ID)
          })
        }
      })
    }
    const getRecommendGoods = () => {
      getRecommendGoodsList().then((res) => {
        if (res.code === 200 && res.data) {
          recommendGoods.value = res.data
        }
      })
    }
    const getHotGoods = () => {
      getHotGoodsList().then((res) => {
        if (res.code === 200 && res.data) {
          hotGoods.value = res.data
        }
      })
    }
    const init = () => {
      loading.value = true
      Promise.all([
        getBaner(),
        getMall(),
        getRecommendGoods(),
        getHotGoods()
      ]).then(() => {
        loading.value = false
      })
    }
    onBeforeMount(() => {
      init()
    })
    return {
      keyWords,
      category,
      recommendGoods,
      hotGoods,
      adBanner,
      bannerPicArray,
      goGoodsPage,
      mallList,
      loading
    }
  },
  components: { HotGoods }
})
</script>
<style lang="scss" scoped>
.type-bar {
  background-color: #fff;
  margin: 0 0.3rem 0.3rem 0.3rem;
  border-radius: 0.3rem;
  font-size: 14px;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
}
.type-bar div {
  padding: 0.3rem;
  font-size: 12px;
  text-align: center;
  flex: 1;
}
.ad-banner {
  background: #f7f7f7;
}
.recommend-area {
  background-color: #fff;
}
.recommend-title {
  padding: 10px;
  color: #e5017d;
  background: #fff;
}
.recommend-body {
  display: flex;
  overflow-y: scroll;
  padding: 10px;
  background: #f7f7f7;
}
.recommend-item {
  font-size: 12px;
  text-align: center;
  background: #fff;
  padding: 10px;
  margin-right: 10px;
  border-radius: 10px;
  box-shadow: 0 0 10px #efefef;
  .recommend-name {
    min-height: 32px;
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    overflow: hidden;
    margin-bottom: 10px;
  }
  .recommend-price {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.hot-title {
  padding: 10px;
  color: #e5017d;
  background: #fff;
}
.hot-goods {
  background-color: #f7f7f7;
  padding: 10px 10px 0 10px;
  margin-bottom: 50px;
}
.loading {
  position: fixed;
  top: 0;
  left: 0;
  height: 100vh;
  width: 100vw;
  background: #fff;
  display: flex;
  justify-content: center;
  align-items: center;
}
</style>